<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<link rel="stylesheet" href="https://www.xingzhenghang.tk/ui/css/mdui.min.css"
		/>
		<script async="" src="https://www.xingzhenghang.tk/js/mdui.js">
		</script>
		<script type="text/javascript" src="jquery.min.js">
		</script>
		<meta charset="utf-8" />
		<title>
			莫斯电码
		</title>
	</head>
	<body class="mdui-drawer-body mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink">
		<content="yes" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width" />
		<div>
			<div class="mdui-container">
				<header class="mdui-appbar mdui-appbar-fixed">
					<div class="mdui-toolbar mdui-color-theme">
						<span class="mdui-btn  mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-drawer="{target: '#main-drawer', swipe: true}">
							<i class="mdui-icon material-icons">
								menu
							</i>
						</span>
						<span class="mdui-typo-title">
							莫斯电码
						</span>
					</div>
				</header>
			</div>
			<div class="mdui-container doc-container">
				<br />
				<form>
					<div class="mdui-textfield">
						<textarea class="mdui-textfield-input" type="text" placeholder="请输入原文或电码"
						rows='10' id='input'></textarea>
					</div>
					<br />
					<div class="mdui-panel" mdui-panel>
						<div class="mdui-panel-item">
							<div class="mdui-panel-item-header">
								电码设置
								<i class="mdui-panel-item-arrow mdui-icon material-icons">
									keyboard_arrow_down
								</i>
							</div>
							<div class="mdui-panel-item-body">
								<div class="mdui-textfield mdui-textfield-floating-label">
									<label class="mdui-textfield-label">
										停顿
									</label>
									<input type='text' id='space' value=' ' placeholder=' ' class="mdui-textfield-input"
									/>
								</div>
								<div class="mdui-textfield mdui-textfield-floating-label">
									<label class="mdui-textfield-label">
										点
									</label>
									<input type='text' id='short' value='•' placeholder='•' class="mdui-textfield-input"
									/>
								</div>
								<div class="mdui-textfield mdui-textfield-floating-label">
									<label class="mdui-textfield-label">
										划
									</label>
									<input type='text' id='long' value='—' placeholder='—' class="mdui-textfield-input"
									/>
								</div>
							</div>
						</div>
					</div>
					<br />
					<div class="mdui-row-xs-4">
						<div class="mdui-col">
							<input class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple"
							type='button' onclick='encode()' value='编码' />
						</div>
						<div class="mdui-col">
							<input class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple"
							type='button' onclick='decode()' value='解码' />
						</div>
						<div class="mdui-col">
						<button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple"
						type='button' id="copycode" data-clipboard-target='#result'>复制</button>
						</div>
						<div class="mdui-col">
						<button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple"
						type='button' id="play">播放电码</button>
						</div>
					</div>
				</form>
				<textarea class="mdui-textfield-input" type="text" placeholder="结果"
				rows='10' id='result'></textarea>
				<script type="text/javascript">
					function $_(id) {
    return document.getElementById(id);
}

function getoption() {
    return {
        space: $_('space').value,
        short: $_('short').value,
        long: $_('long').value,
    };
}

function encode() {
    $_('result').innerHTML = xmorse.encode($_('input').value, getoption());
}

function decode() {
    $_('result').innerHTML = xmorse.decode($_('input').value, getoption()) || '莫斯电码错误';
}
				</script>
				<script type="text/javascript" src="xmorse.min.js">
				</script>
				<script src="morse.js">
				</script>
				<script type="text/javascript" src="clipboard.min.js">
				</script>
				<script>
					var clipboard = new ClipboardJS('#copycode');
clipboard.on('success', function(e) {
    e.clearSelection();
});
clipboard.on('error', function(e) {
    e.clearSelection();
});
				</script>
			</div>
		</div>
	</body>

</html>
